<!--
 * @Author: wjk
 * @Date: 2020-01-09 16:06:59
 * @LastEditors: wjk
 * @LastEditTime: 2020-02-26 17:21:28
 * @description: 城市合伙人
 -->
<template>
  <view>
    <view class="goods-found">
      <view class="sLine">
        <view class="lCont">地区</view>
        <view class="rCont" @click="selectAddress">
          {{ partner.bind_area ? partner.bind_area : '请选择' }}
          <image class="right_arror" src="/static/images/icon/icon_arror_right.png" />
        </view>
      </view>
    </view>
    <base-popup :show="pShow" :show-close="false" @close="closePopup">
      <view class="maskContainer partnerMask">
        <view class="cartClose" @click="closePopup">
          <image src="/static/images/icon/icon_close.png" />
        </view>
        <section v-if="showPresent" class="gift-cont-box">
          <view class="title-cont">
            赠品商品 <view class="sub">(请选择{{ partnerPresentList.choose_count }}款赠品)</view>
          </view>
          <view v-for="(item, index) in partnerPresentList.present_list" :key="index" class="packageIntroIte check-padding">
            <view class="product-check" @click="addToSelected(item, true)">
              <view class="checked-circle" :class="{'checked': selectList.indexOf(item) > -1, 'unable': item.unable}"></view>
            </view>
            <goods-item :need-navigate="false" :show-sub-name="false" class-name="goodsPack" :goods-data="item" from-type="partner" image-width="140rpx"></goods-item>
          </view>
        </section>
        <view class="goods-found centerBox">
          <view class="title-cont" style="padding-top: 10px">
            赠品地址 <view class="sub">(请填写赠品地址)</view>
          </view>
          <view class="sLine">
            <view class="lCont">
              <view>收货人</view>
            </view>
            <view class="rCont">
              <input v-model="userData.name" class="present_input" type="text" placeholder="请填写姓名" placeholder-class="placeholder" />
            </view>
          </view>
          <view class="sLine">
            <view class="lCont">
              <view>联系电话</view>
            </view>
            <view class="rCont">
              <input v-model="userData.mobile" class="present_input" type="text" placeholder="请填写联系电话" placeholder-class="placeholder" />
            </view>
          </view>
          <view class="sLine" @click="selectPresentAddress">
            <view class="lCont">
              <view>所在地区</view>
            </view>
            <view class="rCont ">
              <view class="present_input">{{ userData.province ? (userData.province + userData.city + userData.area) : '请选择' }}</view>
              <image class="right_arror" src="/static/images/icon/icon_arror_right_grey.png" />
            </view>
          </view>
          <view class="sLine">
            <view class="lCont">
              <view>详细地址</view>
            </view>
            <view class="rCont">
              <input v-model="userData.detail" class="present_input" type="text" placeholder="请填写详细地址" placeholder-class="placeholder" />
            </view>
          </view>
        </view>
        <view class="bottomButton" @click="update">保存</view>
        <w-picker
          v-if="pShow"
          ref="presentAddress"
          mode="region"
          :default-val="[userData.province,userData.city,userData.area]"
          @confirm="onConfirm"
        ></w-picker>
      </view>
    </base-popup>
    <w-picker
      ref="region"
      mode="region"
      @confirm="handleAreaBtn"
    />
  </view>
</template>
<script>
import wPicker from '../w-picker/w-picker.vue'
import goodsItem from '@/components/goodsItem/index.vue'
export default {
  name: 'CommodityPartner',
  components: {
    wPicker,
    goodsItem
  },
  props: {
    goods: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      pShow: false,
      userData: {},
      whiteList: [],
      dataName: {
        mobile: '请输入手机号码',
        name: '请填写收货人',
        province: '请填写省份',
        city: '请填写城市',
        area: '请填写地区',
        detail: '请填写详细地址'
      },
      partner: {}, // 城市合伙人object
      partnerPresentList: null, // 城市合伙人赠品列表
      partnerRole: '', // 城市合伙人权限
      partnerArea: '请选择',
      selectList: []
    }
  },
  computed: {
    showPresent() {
      return this.partnerPresentList && this.partnerPresentList.present_list && this.partnerPresentList.present_list.length
    }
  },
  created() {
    this.getArea()
  },
  methods: {
    async handleAreaBtn(state) {
      const res = await this.$api.earnApi.earningPartnerArea({
        province: state.checkArr[0],
        province_id: state.checkValue[0],
        city: state.checkArr[1],
        city_id: state.checkValue[1],
        area: state.checkArr[2],
        area_id: state.checkValue[2]
      })
      if (res.code) return
      this.$set(this.partner, 'bind_area', state.checkArr[0] + state.checkArr[1] + state.checkArr[2])
      setTimeout(() => {
        this.getArea()
      }, 2000)
    },
    onConfirm(state) {
      this.$set(this.userData, 'province', state.checkArr[0])
      this.$set(this.userData, 'city', state.checkArr[1])
      this.$set(this.userData, 'area', state.checkArr[2])
    },
    selectPresentAddress() {
      this.$refs['presentAddress'].show()
    },
    selectAddress() {
      if (this.partner.bind_area) {
        return
      }
      this.$gc.$message({
        content: '区域选择后无法更改, 如需修改请联系客服',
        title: '选择区域提示',
        confirmColor: '#fff',
        confirmBackground: '#ff759f',
        showMessage: true,
        confirmText: '确定',
        align: 'center',
        confirm: async() => {
          this.$refs['region'].show()
        }
      })
    },
    async getArea() {
      // 城市合伙人商品获取权限
      const res = await this.$api.earnApi.earningPartner()
      this.partner = res.data
      this.partnerPresentList = this.partner.goods_list.filter(item => {
        return item.goods_id === this.goods.goods_id
      })[0] || []
      if (this.partnerPresentList.length) {
        this.partnerPresentList.present_list.forEach(item => {
          item.num = item.piece_number
          item.properties_name = item.sku
        })
      }
      const rest = await this.$api.earnApi.earningPermission({
        from_type: 9,
        goods_id: this.goods.goods_id
      })
      this.partnerRole = rest.data.role_permission
      this.$emit('validProps', {
        type: 'partner',
        partner: this.partner,
        partnerRole: this.partnerRole
      })
      this.getPresentAddress()
    },
    async getPresentAddress() {
      const res = await this.$api.mineApi.getPresentAddress()
      if (res.data) {
        this.userData = res.data
        if (this.partnerPresentList && res.data.select_presents && this.partnerPresentList.present_list) {
          const selectArr = JSON.parse(res.data.select_presents)
          this.partnerPresentList.present_list.forEach(element => {
            if (selectArr.find(item => item.goodsId === element.goods_id)) {
              this.selectList.push(element)
            }
          })
        }
      }
    },
    async checkRole() {
      if (!this.partner.bind_area) {
        uni.showToast({
          title: '请先选择地区',
          icon: 'none',
          duration: 2 * 1000
        })
        return false
      }
      if (!this.userData.select_presents) {
        this.$gc.$message({
          content: '请您填写赠品地址，以确保您的赠品可及时送出',
          title: '温馨提示',
          confirmColor: '#fff',
          confirmBackground: '#ff759f',
          showMessage: true,
          confirmText: '立即前往',
          cancelText: '稍后再说',
          align: 'center',
          confirm: async() => {
            this.showPopup()
          }
        })
        return false
      }
      return true
    },
    addToSelected(item) {
      const index = this.selectList.indexOf(item)
      if (index > -1) {
        this.selectList.splice(index, 1)
        return
      }
      this.selectList.push(item)
      if (this.selectList.length > this.partnerPresentList.choose_count) {
        this.selectList.shift()
      }
    },
    async update() {
      const data = {
        ...this.userData,
        country: 'China',
        region_code: '+86'
      }

      let canSub = ''
      for (const x in data) {
        if (!data[x] && data[x] !== 0) {
          if (this.whiteList.indexOf(x) < 0) {
            canSub = x
            break
          }
        }
      }
      if (canSub) {
        uni.showToast({
          title: this.dataName[canSub],
          icon: 'none',
          duration: 2 * 1000
        })
        return
      }
      if (this.partnerPresentList) {
        if (this.selectList.length < this.partnerPresentList.choose_count) {
          uni.showToast({
            title: '请选择赠品',
            icon: 'none',
            duration: 2 * 1000
          })
          return
        }
        data.goodsIdList = JSON.stringify(this.selectList.map(item => {
          return {
            goodsId: item.goods_id,
            giftPieceNumber: item.piece_number
          }
        }))
      }
      const res = await this.$api.mineApi.setPresentAddress(data)
      if (res.code) {
        return
      }
      this.getPresentAddress()
      uni.showToast({
        title: '更新成功',
        icon: 'none',
        duration: 2 * 1000
      })
      this.closePopup()
    },
    closePopup() {
      this.$set(this, 'pShow', false)
    },
    showPopup() {
      this.pShow = true
    }
  }
}
</script>
<style lang="scss" scoped>
.partnerMask{
  max-height: 100vh;
  overflow: auto;
  border-radius: 0;
  .gift-cont-box{
    background-color: #fff;
    padding: 10px 15px 0 15px;
    margin-top: 10px;
  }
  .title-cont{
    color: black;
    font-size: 15px;

    .sub{
      display: inline-block;
      color: $color-tips;
      font-size: 12px;
      padding: 0 5px;
    }
  }
  .centerBox{
    background-color: #fff;
    margin: 10px 0 10px 0;
    padding: 0 10px;
    .rCont{
      .present_input{
        text-align: right;
        font-size: 24rpx;;
        width: 100%;
        padding-right: 40rpx;
      }
    }
  }
  .bottomButton{
    @include bx-button-solid($height: 72rpx)
  }
}
</style>
